import React, { useState } from 'react';
import { 
  List, Card, Avatar, Space, Button, Skeleton, 
  Dropdown, Menu, Typography, Badge, Tag, Tooltip, Progress, Divider 
} from 'antd';
import { 
  MessageOutlined, LikeOutlined, StarOutlined,
  MoreOutlined, UserOutlined, LoadingOutlined, ShoppingOutlined, EyeOutlined, ShoppingCartOutlined, HeartOutlined 
} from '@ant-design/icons';
import '../../../styles/tutorial.css';

const { Text, Paragraph } = Typography;

/**
 * List 列表组件教程
 * 展示 List 组件的核心特性和常见业务场景
 * 
 * 核心特性包括：
 * 1. 基础列表 - 简单数据展示
 * 2. 卡片列表 - 网格布局展示
 * 3. 复杂列表 - 多种信息组合
 * 4. 交互功能 - 加载更多、滚动加载
 * 5. 自适应布局 - 响应式设计
 */
const ListTutorial = () => {
  // 状态管理
  const [loading, setLoading] = useState(false);
  const [loadingMore, setLoadingMore] = useState(false);
  const [data, setData] = useState([
    {
      id: '1',
      title: '标题一',
      description: '这是一段关于标题一的描述文字...',
      avatar: 'https://joeschmoe.io/api/v1/random',
      content: '这是一段较长的内容描述，用于展示列表项的详细信息...',
      tags: ['标签1', '标签2'],
      likes: 156,
      comments: 23,
      stars: 45,
    },
    {
      id: '2',
      title: '标题二',
      description: '这是一段关于标题二的描述文字...',
      avatar: 'https://joeschmoe.io/api/v1/random',
      content: '这是另一段较长的内容描述，展示了不同的信息...',
      tags: ['标签3', '标签4'],
      likes: 234,
      comments: 56,
      stars: 78,
    },
    // 更多数据...
  ]);

  /**
   * 模拟加载更多数据
   */
  const loadMore = () => {
    setLoadingMore(true);
    // 模拟API请求
    setTimeout(() => {
      const newData = [...data];
      newData.push({
        id: String(data.length + 1),
        title: `新标题 ${data.length + 1}`,
        description: '这是新加载的内容...',
        avatar: 'https://joeschmoe.io/api/v1/random',
        content: '这是新加载的详细内容...',
        tags: ['新标签'],
        likes: Math.floor(Math.random() * 200),
        comments: Math.floor(Math.random() * 50),
        stars: Math.floor(Math.random() * 100),
      });
      setData(newData);
      setLoadingMore(false);
    }, 1000);
  };

  /**
   * 列表操作菜单
   */
  const actionMenu = (
    <Menu items={[
      { key: '1', label: '编辑' },
      { key: '2', label: '删除' },
      { key: '3', label: '更多操作' },
    ]} />
  );

  return (
    <div className="tutorial-container">
      <h1>List 列表组件</h1>

      {/* 1. 基础列表 */}
      <section className="example-section">
        <h2>1. 基础列表</h2>
        <div className="section-description">
          <p>最简单的列表展示：</p>
          <ul>
            <li>基本的数据展示</li>
            <li>列表项布局</li>
            <li>基础交互</li>
          </ul>
        </div>
        <List
          itemLayout="horizontal"
          dataSource={data}
          renderItem={(item) => (
            <List.Item>
              <List.Item.Meta
                avatar={<Avatar src={item.avatar} />}
                title={<a href="#">{item.title}</a>}
                description={item.description}
              />
            </List.Item>
          )}
        />
      </section>

      {/* 2. 卡片列表 */}
      <section className="example-section">
        <h2>2. 卡片列表</h2>
        <div className="section-description">
          <p>网格布局的列表：</p>
          <ul>
            <li>卡片式布局</li>
            <li>响应式设计</li>
            <li>丰富的内容展示</li>
          </ul>
        </div>
        <List
          grid={{ gutter: 16, xs: 1, sm: 2, md: 3, lg: 3, xl: 4, xxl: 4 }}
          dataSource={data}
          renderItem={(item) => (
            <List.Item>
              <Card
                hoverable
                cover={
                  <img
                    alt="example"
                    src="https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png"
                  />
                }
                actions={[
                  <Space>
                    <LikeOutlined /> {item.likes}
                  </Space>,
                  <Space>
                    <MessageOutlined /> {item.comments}
                  </Space>,
                  <Space>
                    <StarOutlined /> {item.stars}
                  </Space>,
                ]}
              >
                <Card.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={item.title}
                  description={item.description}
                />
              </Card>
            </List.Item>
          )}
        />
      </section>

      {/* 3. 复杂列表 */}
      <section className="example-section">
        <h2>3. 复杂列表</h2>
        <div className="section-description">
          <p>包含丰富内容和交互的列表：</p>
          <ul>
            <li>多种信息展示</li>
            <li>复杂的交互操作</li>
            <li>加载状态管理</li>
          </ul>
        </div>
        <List
          itemLayout="vertical"
          size="large"
          loadMore={
            <div style={{ textAlign: 'center', marginTop: 12 }}>
              <Button
                onClick={loadMore}
                loading={loadingMore}
              >
                加载更多
              </Button>
            </div>
          }
          dataSource={data}
          renderItem={(item) => (
            <List.Item
              key={item.id}
              actions={[
                <Space>
                  <LikeOutlined /> {item.likes}
                </Space>,
                <Space>
                  <MessageOutlined /> {item.comments}
                </Space>,
                <Space>
                  <StarOutlined /> {item.stars}
                </Space>,
              ]}
              extra={
                <Dropdown overlay={actionMenu} placement="bottomRight">
                  <Button type="text" icon={<MoreOutlined />} />
                </Dropdown>
              }
            >
              <Skeleton loading={loading} active avatar>
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={<a href="#">{item.title}</a>}
                  description={
                    <Space direction="vertical">
                      <Text>{item.description}</Text>
                      <Space>
                        {item.tags.map(tag => (
                          <Tag key={tag} color="blue">{tag}</Tag>
                        ))}
                      </Space>
                    </Space>
                  }
                />
                <Paragraph ellipsis={{ rows: 2 }}>
                  {item.content}
                </Paragraph>
              </Skeleton>
            </List.Item>
          )}
        />
      </section>

      {/* 4. 高级功能展示 */}
      <section className="example-section">
        <h2>4. 高级功能展示</h2>
        <div className="section-description">
          <p>List 组件的高级特性：</p>
          <ul>
            <li>虚拟滚动 - 处理大量数据</li>
            <li>分页功能 - 数据分页展示</li>
            <li>拖拽排序 - 可交互排序</li>
          </ul>
        </div>
        
        {/* 4.1 分页列表 */}
        <div className="sub-section">
          <h3>4.1 分页列表</h3>
          <List
            itemLayout="horizontal"
            dataSource={data}
            pagination={{
              onChange: (page) => {
                console.log('页码变化:', page);
              },
              pageSize: 2,
              total: data.length,
              showTotal: (total) => `共 ${total} 条`,
              showQuickJumper: true,
              showSizeChanger: true,
            }}
            renderItem={(item) => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={item.title}
                  description={item.description}
                />
              </List.Item>
            )}
          />
        </div>

        {/* 4.2 可滚动加载列表 */}
        <div className="sub-section">
          <h3>4.2 滚动加载</h3>
          <List
            className="scrollable-list"
            itemLayout="horizontal"
            dataSource={data}
            style={{ 
              height: 300, 
              overflow: 'auto',
              border: '1px solid #e8e8e8',
              borderRadius: '4px',
              padding: '8px'
            }}
            onScroll={(e) => {
              const { scrollHeight, scrollTop, clientHeight } = e.target;
              // 滚动到底部时加载更多
              if (scrollHeight - scrollTop === clientHeight) {
                loadMore();
              }
            }}
            renderItem={(item) => (
              <List.Item>
                <Skeleton loading={loadingMore} active avatar paragraph={{ rows: 1 }}>
                  <List.Item.Meta
                    avatar={<Avatar src={item.avatar} />}
                    title={item.title}
                    description={item.description}
                  />
                </Skeleton>
              </List.Item>
            )}
          />
        </div>

        {/* 4.3 列表项交互 */}
        <div className="sub-section">
          <h3>4.3 列表项交互</h3>
          <List
            itemLayout="horizontal"
            dataSource={data}
            renderItem={(item) => (
              <List.Item
                actions={[
                  <Button type="link" key="edit" onClick={() => console.log('编辑', item)}>
                    编辑
                  </Button>,
                  <Button type="link" danger key="delete" onClick={() => console.log('删除', item)}>
                    删除
                  </Button>
                ]}
                extra={
                  <Space>
                    <Badge count={item.comments} overflowCount={99}>
                      <Button icon={<MessageOutlined />} />
                    </Badge>
                    <Badge count={item.likes} overflowCount={999}>
                      <Button icon={<LikeOutlined />} />
                    </Badge>
                  </Space>
                }
              >
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={
                    <Space>
                      {item.title}
                      {item.tags.map(tag => (
                        <Tag key={tag} color="blue">{tag}</Tag>
                      ))}
                    </Space>
                  }
                  description={item.description}
                />
              </List.Item>
            )}
          />
        </div>
      </section>

      {/* 5. 最佳实践 */}
      <section className="example-section">
        <h2>5. 最佳实践</h2>
        <div className="section-description">
          <p>List 组件使用建议：</p>
          <ul>
            <li>合理使用虚拟滚动处理大数据</li>
            <li>适当的加载状态反馈</li>
            <li>错误处理和空状态展示</li>
            <li>合理的数据缓存策略</li>
          </ul>
        </div>
        {/* 这里可以添加具体的最佳实践示例 */}
      </section>

      {/* 6. 高级应用场景 */}
      <section className="example-section">
        <h2>6. 高级应用场景</h2>
        
        {/* 6.1 可拖拽排序列表 */}
        <div className="sub-section">
          <h3>6.1 可拖拽排序列表</h3>
          <div className="section-description">
            <p>实现列表项的拖拽排序功能：</p>
            <ul>
              <li>使用 react-dnd 实现拖拽</li>
              <li>保持拖拽状态</li>
              <li>动画效果展示</li>
            </ul>
          </div>
          {/* 这里添加拖拽排序示例 */}
        </div>

        {/* 6.2 虚拟滚动列表 */}
        <div className="sub-section">
          <h3>6.2 虚拟滚动列表</h3>
          <div className="section-description">
            <p>处理大数据量的列表展示：</p>
            <ul>
              <li>仅渲染可视区域数据</li>
              <li>滚动性能优化</li>
              <li>动态高度处理</li>
            </ul>
          </div>
          {/* 这里添加虚拟滚动示例 */}
        </div>

        {/* 6.3 树形列表 */}
        <div className="sub-section">
          <h3>6.3 树形列表</h3>
          <div className="section-description">
            <p>展示具有层级关系的数据：</p>
            <ul>
              <li>多级数据展示</li>
              <li>展开/收起功能</li>
              <li>节点操作处理</li>
            </ul>
          </div>
          <List
            itemLayout="vertical"
            dataSource={[
              {
                key: '1',
                title: '父节点 1',
                children: [
                  {
                    key: '1-1',
                    title: '子节点 1-1',
                  },
                  {
                    key: '1-2',
                    title: '子节点 1-2',
                  },
                ],
              },
              // ... 更多树形数据
            ]}
            renderItem={(item) => (
              <List.Item>
                <List.Item.Meta
                  title={item.title}
                />
                {item.children && (
                  <List
                    itemLayout="vertical"
                    dataSource={item.children}
                    renderItem={(child) => (
                      <List.Item style={{ marginLeft: 24 }}>
                        <List.Item.Meta
                          title={child.title}
                        />
                      </List.Item>
                    )}
                  />
                )}
              </List.Item>
            )}
          />
        </div>

        {/* 6.4 异步加载列表 */}
        <div className="sub-section">
          <h3>6.4 异步加载列表</h3>
          <div className="section-description">
            <p>处理异步数据加载场景：</p>
            <ul>
              <li>加载状态管理</li>
              <li>错误处理机制</li>
              <li>数据缓存策略</li>
            </ul>
          </div>
          <List
            loading={loading}
            itemLayout="horizontal"
            dataSource={data}
            renderItem={(item) => (
              <List.Item>
                <Skeleton loading={loading} active avatar>
                  <List.Item.Meta
                    avatar={<Avatar src={item.avatar} />}
                    title={item.title}
                    description={
                      <Space direction="vertical">
                        <Text>{item.description}</Text>
                        <Space>
                          {item.tags.map(tag => (
                            <Tag key={tag} color="blue">{tag}</Tag>
                          ))}
                        </Space>
                      </Space>
                    }
                  />
                </Skeleton>
              </List.Item>
            )}
          />
          <div style={{ textAlign: 'center', marginTop: 16 }}>
            <Button
              onClick={() => {
                setLoading(true);
                setTimeout(() => {
                  setLoading(false);
                }, 1000);
              }}
            >
              模拟加载
            </Button>
          </div>
        </div>
      </section>

      {/* 7. 性能优化建议 */}
      <section className="example-section">
        <h2>7. 性能优化建议</h2>
        <div className="section-description">
          <p>List 组件性能优化要点：</p>
          <ul>
            <li>使用 React.memo 优化列表项渲染</li>
            <li>合理使用 key 属性</li>
            <li>避免不必要的重渲染</li>
            <li>大数据量时使用虚拟滚动</li>
            <li>按需加载数据</li>
          </ul>
        </div>
      </section>

      {/* 8. 实战应用示例 */}
      <section className="example-section">
        <h2>8. 实战应用示例</h2>

        {/* 8.1 消息列表 */}
        <div className="sub-section">
          <h3>8.1 消息列表</h3>
          <div className="section-description">
            <p>常见的消息通知列表实现：</p>
            <ul>
              <li>未读/已读状态管理</li>
              <li>消息分类展示</li>
              <li>时间排序和分组</li>
            </ul>
          </div>
          <List
            itemLayout="horizontal"
            dataSource={[
              {
                id: 'm1',
                title: '系统通知',
                content: '您的账号已完成实名认证',
                time: '2024-03-20 10:30',
                read: false,
                type: 'system'
              },
              {
                id: 'm2',
                title: '订单提醒',
                content: '您的订单已发货',
                time: '2024-03-19 15:45',
                read: true,
                type: 'order'
              }
            ]}
            renderItem={(item) => (
              <List.Item>
                <List.Item.Meta
                  avatar={
                    <Badge dot={!item.read}>
                      <Avatar icon={item.type === 'system' ? <UserOutlined /> : <ShoppingOutlined />} />
                    </Badge>
                  }
                  title={
                    <Space>
                      <Text strong={!item.read}>{item.title}</Text>
                      <Tag color={item.type === 'system' ? 'blue' : 'green'}>
                        {item.type === 'system' ? '系统' : '订单'}
                      </Tag>
                    </Space>
                  }
                  description={
                    <Space direction="vertical">
                      <Text>{item.content}</Text>
                      <Text type="secondary">{item.time}</Text>
                    </Space>
                  }
                />
              </List.Item>
            )}
          />
        </div>

        {/* 8.2 评论列表 */}
        <div className="sub-section">
          <h3>8.2 评论列表</h3>
          <div className="section-description">
            <p>社交评论功能实现：</p>
            <ul>
              <li>评论嵌套展示</li>
              <li>点赞和回复功能</li>
              <li>评论分页加载</li>
            </ul>
          </div>
          <List
            className="comment-list"
            itemLayout="horizontal"
            dataSource={[
              {
                id: 'c1',
                author: '张三',
                avatar: 'https://joeschmoe.io/api/v1/random',
                content: '这是一条评论内容',
                datetime: '2小时前',
                likes: 12,
                replies: [
                  {
                    id: 'r1',
                    author: '李四',
                    content: '回复评论',
                    datetime: '1小时前'
                  }
                ]
              }
            ]}
            renderItem={(item) => (
              <List.Item
                actions={[
                  <Tooltip key="like" title="点赞">
                    <Button 
                      type="text" 
                      icon={<LikeOutlined />}
                      onClick={() => console.log('点赞', item.id)}
                    >
                      {item.likes}
                    </Button>
                  </Tooltip>,
                  <Button 
                    type="text" 
                    key="reply"
                    onClick={() => console.log('回复', item.id)}
                  >
                    回复
                  </Button>
                ]}
              >
                <List.Item.Meta
                  avatar={<Avatar src={item.avatar} />}
                  title={
                    <Space>
                      <Text strong>{item.author}</Text>
                      <Text type="secondary">{item.datetime}</Text>
                    </Space>
                  }
                  description={item.content}
                />
                {/* 嵌套回复列表 */}
                {item.replies && item.replies.length > 0 && (
                  <List
                    className="reply-list"
                    itemLayout="horizontal"
                    dataSource={item.replies}
                    renderItem={(reply) => (
                      <List.Item style={{ marginLeft: 32, marginTop: 16 }}>
                        <List.Item.Meta
                          avatar={<Avatar size="small">{reply.author[0]}</Avatar>}
                          title={
                            <Space>
                              <Text>{reply.author}</Text>
                              <Text type="secondary">{reply.datetime}</Text>
                            </Space>
                          }
                          description={reply.content}
                        />
                      </List.Item>
                    )}
                  />
                )}
              </List.Item>
            )}
          />
        </div>

        {/* 8.3 商品列表 */}
        <div className="sub-section">
          <h3>8.3 商品列表</h3>
          <div className="section-description">
            <p>电商商品列表实现：</p>
            <ul>
              <li>商品信息展示</li>
              <li>价格和库存管理</li>
              <li>快速操作按钮</li>
            </ul>
          </div>
          <List
            grid={{ gutter: 16, column: 3 }}
            dataSource={[
              {
                id: 'p1',
                name: '商品名称 1',
                image: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
                price: 199.00,
                originalPrice: 299.00,
                stock: 100,
                sales: 1000,
                tags: ['新品', '热销'],
              },
              {
                id: 'p2',
                name: '商品名称 2',
                image: 'https://gw.alipayobjects.com/zos/rmsportal/JiqGstEfoWAOHiTxclqi.png',
                price: 299.00,
                originalPrice: 399.00,
                stock: 50,
                sales: 500,
                tags: ['促销'],
              },
            ]}
            renderItem={(item) => (
              <List.Item>
                <Card
                  hoverable
                  cover={<img alt={item.name} src={item.image} />}
                  actions={[
                    <Tooltip title="查看详情">
                      <Button type="link" icon={<EyeOutlined />} />
                    </Tooltip>,
                    <Tooltip title="加入购物车">
                      <Button type="link" icon={<ShoppingCartOutlined />} />
                    </Tooltip>,
                    <Tooltip title="收藏">
                      <Button type="link" icon={<HeartOutlined />} />
                    </Tooltip>,
                  ]}
                >
                  <Card.Meta
                    title={
                      <Space direction="vertical" size={0}>
                        <Text>{item.name}</Text>
                        <Space>
                          <Text type="danger" strong>¥{item.price}</Text>
                          <Text type="secondary" delete>¥{item.originalPrice}</Text>
                        </Space>
                      </Space>
                    }
                    description={
                      <Space direction="vertical" size={4}>
                        <Space>
                          {item.tags.map(tag => (
                            <Tag key={tag} color={tag === '新品' ? 'blue' : tag === '热销' ? 'red' : 'orange'}>
                              {tag}
                            </Tag>
                          ))}
                        </Space>
                        <Space split={<Divider type="vertical" />}>
                          <Text type="secondary">库存: {item.stock}</Text>
                          <Text type="secondary">销量: {item.sales}</Text>
                        </Space>
                      </Space>
                    }
                  />
                </Card>
              </List.Item>
            )}
          />
        </div>

        {/* 8.4 任务列表 */}
        <div className="sub-section">
          <h3>8.4 任务列表</h3>
          <div className="section-description">
            <p>项目任务管理列表：</p>
            <ul>
              <li>任务状态管理</li>
              <li>优先级标记</li>
              <li>进度展示</li>
            </ul>
          </div>
          <List
            itemLayout="horizontal"
            dataSource={[
              {
                id: 't1',
                title: '完成首页设计',
                status: 'processing',
                priority: 'high',
                progress: 60,
                deadline: '2024-03-25',
                assignee: '张三',
              },
              {
                id: 't2',
                title: '后端 API 开发',
                status: 'pending',
                priority: 'medium',
                progress: 30,
                deadline: '2024-03-28',
                assignee: '李四',
              },
            ]}
            renderItem={(item) => (
              <List.Item
                actions={[
                  <Button type="link">编辑</Button>,
                  <Button type="link" danger>删除</Button>,
                ]}
              >
                <List.Item.Meta
                  avatar={
                    <Avatar style={{ 
                      backgroundColor: 
                        item.priority === 'high' ? '#f5222d' : 
                        item.priority === 'medium' ? '#faad14' : '#52c41a' 
                    }}>
                      {item.priority[0].toUpperCase()}
                    </Avatar>
                  }
                  title={
                    <Space>
                      {item.title}
                      <Tag color={
                        item.status === 'processing' ? 'blue' : 
                        item.status === 'pending' ? 'orange' : 'green'
                      }>
                        {item.status}
                      </Tag>
                    </Space>
                  }
                  description={
                    <Space direction="vertical" size={4}>
                      <Progress percent={item.progress} size="small" />
                      <Space split={<Divider type="vertical" />}>
                        <Text type="secondary">截止日期: {item.deadline}</Text>
                        <Text type="secondary">负责人: {item.assignee}</Text>
                      </Space>
                    </Space>
                  }
                />
              </List.Item>
            )}
          />
        </div>
      </section>
    </div>
  );
};

// 添加一些必要的样式
const styles = {
  subSection: {
    marginBottom: 24,
  },
  scrollableList: {
    height: 300,
    overflow: 'auto',
    border: '1px solid #e8e8e8',
    borderRadius: '4px',
    padding: '8px',
  },
  commentList: {
    backgroundColor: '#fafafa',
    padding: '20px',
    borderRadius: '4px',
  },
  replyList: {
    marginTop: '8px',
    marginLeft: '32px',
  }
};

export default ListTutorial; 